<template>
  <c-form-item :label="label" :span="span">
    <el-select default-first-option filterable :filter-method="filterMethod" :value="value" @input="change($event)"
      clearable @clear="clear">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        <span style="float: left; font-size: 16px;">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 16px;">{{ item.code }}</span>
      </el-option>
    </el-select>
  </c-form-item>
</template>
<script>
const PinyinMatch = require('pinyin-match')

export default {
  props: {
    //标题
    label: {
      type: String,
      default: 'undefined'
    },
    value: {
      type: String
    },
    span: {
      type: Number,
      default: 8
    }
  },
  methods: {
    change(val) {
      this.$emit('input', val)
    },
    clear() {
      this.options = this.sourceOptions
    },
    filterMethod(query) {
      this.options = this.sourceOptions.filter(item => {
        let values = JSON.stringify(Object.values(item))
        return values.toLowerCase().indexOf(query.toLowerCase()) > -1 || PinyinMatch.match(values, query)
      })
    }
  },
  created() {
    this.options = this.sourceOptions
  },
  data() {
    return {
      options: [],
      sourceOptions: [
        {
          value: '1',
          code: '选项1',
          label: '2020'
        },
        {
          value: '2',
          code: '选项2',
          label: '5'
        },
        { value: '3', code: '选项3', label: '蚵仔煎' },
        { value: '4', code: '选项4', label: '龙须面' },
        { value: '5', code: '选项', label: '北京烤鸭' }
      ]
    }
  }
}
</script>
<style scoped>
</style>